<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>工作排名</title>
    <link rel="stylesheet" href="/static/css/main-page/g-reset.css" />
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css" />
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/main-page/echarts.min.js"></script>
    <link href="/webjars/miniui/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
    <style>
        .discell {
            text-align:right;
            width:15%;
        }
        .input {
            width:20%;
        }
    </style>
</head>
<body>
<h2 style="line-height: 40px">工作排名:</h2>
<ul class="clearfix" style="height: 600px;">
    <li class="fl" style="height: 100%;width: 40%;margin: 0 5%;">
        <div id="div1" style="height: 100%;width: 100%;"></div>
    </li>
    <li class="fl" style="height: 100%;width: 40%;margin: 0 5%;">
        <div id="div2" style="height: 100%;width: 100%;"></div>
    </li>
</ul>

<script type="text/javascript">
    $(function () {
        mini.parse();
        var div1 = echarts.init(document.getElementById('div1'));
        var div2 = echarts.init(document.getElementById('div2'));
        var hcRanking = [], hcScale = [], name1 = [];
        var xjRanking = [], xjScale = [], name2 = [];
        $.ajax({
            url: "/azbj/yazgl/checkList",
            type: "post",
            async: true,
            dataType: "json",
            success: function (result) {
                var data = result.data;
                if (data.length) {
                    for (var i = 0; i < data.length; i++) {
                        name1.push(data[i].name);
                        hcRanking.push(data[i].ranking);
                        hcScale.push({name: data[i].name, value: data[i].yoY, count: data[i].count});
                    }
                }
                chart_load1();
            }
        });

        $.ajax({
            url: "/azbj/yazgl/returnReceipt",
            type: "post",
            async: true,
            dataType: "json",
            success: function (result) {
                var data = result.data;
                if (data.length) {
                    for (var i = 0; i < data.length; i++) {
                        name2.push(data[i].name);
                        xjRanking.push(data[i].ranking);
                        xjScale.push({name: data[i].name, value: data[i].yoY, count: data[i].count});
                    }
                }
                chart_load2();
            }
        });

        function chart_load1() {
            option1 = {
                color: ['rgba(64,159,255,1)'],
                title: {
                    text: '核查成功率',
                    subtext: '下级机构'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return '核查成功率:' + params[0].data.value + '%' + '<br/>总数: ' + params[0].data.count;
                    }
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    top: "14%",
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '比率',
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                yAxis: {
                    name: '机构',
                    type: 'category',
                    data: name1,
                    nameLocation: 'start',
                    inverse: true
                },
                series: [
                    {
                        name: '核查成功率',
                        type: 'bar',
                        data: hcScale,
                        barMaxWidth: 50

                    }
                ]
            };
            div1.setOption(option1);
        }

        function chart_load2() {
            option2 = {
                color: ['rgba(64,159,255,1)'],
                title: {
                    text: '衔接成功率',
                    subtext: '下级机构'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return '衔接成功率:' + params[0].data.value + '%' + '<br/>总数: ' + params[0].data.count;
                    }
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    top: "14%",
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '比率',
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                yAxis: {
                    name: '机构',
                    type: 'category',
                    data: name2,
                    nameLocation: 'start',
                    inverse: true
                },
                series: [
                    {
                        name: '衔接成功率',
                        type: 'bar',
                        data: xjScale,
                        barMaxWidth: 50
                    }
                ]
            };
            div2.setOption(option2);
        }
    });
</script>
</body>
</html>